<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
        <el-card shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="tools-fill" />
              产线信息
            </div>
          </div>
          <vab-query-form>
            <vab-query-form-left-panel :span="12">
              <el-button
                size="mini"
                icon="el-icon-plus"
                type="primary"
                @click="
                  dialogVisible = true
                  type = 1
                "
              >
                添加
              </el-button>
            </vab-query-form-left-panel>
          </vab-query-form>
          <el-table :data="tableData1" style="width: 100%">
            <el-table-column label="产线编号" prop="LineId" />
            <el-table-column label="产线名称" prop="LineName" />
            <el-table-column label="产线说明" prop="LineContent" />
            <el-table-column label="设备数目" prop="DeviceNum">
              <template slot-scope="scope">
                <el-button type="text">{{ scope.row.DeviceNum }}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="运输设备" prop="TransportDevice" />
            <el-table-column label="操作" width="200px">
              <template slot-scope="scope">
                <el-button size="mini" @click="getData22(scope.row.LineId)">
                  查询
                </el-button>
                <el-popconfirm
                  title="确定删除?"
                  @confirm="del1(scope.row.LineId)"
                >
                  <template slot="reference">
                    <el-button size="mini" type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
            <template slot="empty">
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
          <el-pagination
            background
            :current-page="queryForm1.pageNo"
            :layout="layout"
            :page-size="queryForm1.pageSize"
            :total="total1"
            @current-change="handleCurrentChange1"
            @size-change="handleSizeChange1"
          />
        </el-card>
      </el-col>
      <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
        <el-card shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="tools-fill" />
              产线设备信息
            </div>
          </div>
          <vab-query-form>
            <vab-query-form-left-panel :span="12">
              <el-button
                size="mini"
                icon="el-icon-plus"
                type="primary"
                @click="addSheBei()"
              >
                添加
              </el-button>
            </vab-query-form-left-panel>
          </vab-query-form>
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column label="设备编号" prop="Id" />
            <el-table-column label="设备类型" prop="Type" />
            <el-table-column label="设备点位" prop="Location" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-popconfirm title="确定删除?" @confirm="del2(scope.row.Id)">
                  <template slot="reference">
                    <el-button size="mini" type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
            <template slot="empty">
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
          <el-pagination
            background
            :current-page="queryForm2.pageNo"
            :layout="layout"
            :page-size="queryForm2.pageSize"
            :total="total2"
            @current-change="handleCurrentChange2"
            @size-change="handleSizeChange2"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-dialog :close-on-click-modal="false" 
      :visible="dialogVisible"
      :title="title"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleFormRef"
        :model="form"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <template v-if="type == 1">
          <el-form-item label="产线编号" prop="LineId">
            <el-input v-model="form.LineId" />
          </el-form-item>
          <el-form-item label="产线名称" prop="LineName">
            <el-input v-model="form.LineName" />
          </el-form-item>
          <el-form-item label="产线说明" prop="LineContent">
            <el-input v-model="form.LineContent" type="textarea" />
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="产线编号">
            <el-input v-model="LineId" disabled />
          </el-form-item>
          <el-form-item label="设备编号" prop="DeviceId">
            <!-- <el-input v-model="form.DeviceId" /> -->
            <el-select v-model="form.DeviceId" placeholder="选择设备编号">
              <template v-for="(item, index) in this.sheBeiData">
                <el-option :label="item.DeviceId" :value="item.DeviceId" />
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="点位" prop="Location">
            <el-input v-model="form.Location" />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import {
    ProductLineInfo,
    DeviceListInfo,
    ProductLineList,
    DeviceListList,
    ProductLineDelete,
    DeviceListDelete,
    AvailableDeviceList,
  } from '@/api/equipment'
  import {
    List,
    DeviceState,
    DeviceStatistics,
    DeviceRunningInfo,
  } from '@/api/index'

  export default {
    data() {
      return {
        type: '',
        form: {
          LineId: '',
          LineName: '',
          LineContent: '',
          DeviceId: '',
          Location: '',
        },
        dialogVisible: false,

        layout: 'sizes, prev, pager, next',
        tableData1: [],
        queryForm1: {
          pageNo: 1,
          pageSize: 10,
        },
        total1: 0,

        tableData2: [],
        queryForm2: {
          pageNo: 1,
          pageSize: 10,
        },
        total2: 0,

        LineId: 0,
        sheBeiData: [],
        title: '添加',
      }
    },
    created() {
      this.getData1()
    },
    methods: {
      addSheBei() {
        AvailableDeviceList({ LineId: this.LineId }).then((res) => {
          this.sheBeiData = res.DeviceList
          this.dialogVisible = true
          this.type = 2
        })
      },
      submitForm() {
        if (this.type == 1) {
          //产线
          const params = {
            LineInfo: {
              LineId: this.form.LineId,
              LineName: this.form.LineName,
              LineContent: this.form.LineContent,
            },
          }
          ProductLineInfo(params).then((res) => {
            this.dialogVisible = false
            this.$baseMessage('提交成功', 'success', 'vab-hey-message-success')
            this.getData1()
          })
        } else {
          const params = {
            LineId: this.LineId,
            DeviceId: this.form.DeviceId,
            LineContent: this.form.Location,
          }
          DeviceListInfo(params).then((res) => {
            this.dialogVisible = false
            this.$baseMessage('提交成功', 'success', 'vab-hey-message-success')
            this.getData1()
          })
        }
      },
      handleClose() {
        this.dialogVisible = false
      },
      del1(LineId) {
        ProductLineDelete({ LineId }).then((res) => {
          this.getData1()
        })
      },
      del2(DeviceId) {
        console.log('DeviceIdDeviceId', DeviceId)
        DeviceListDelete({ LineId: this.LineId, DeviceId }).then((res) => {
          this.getData1()
        })
      },
      handleSizeChange1(val) {
        this.queryForm1.pageSize = val
        this.getData1()
      },
      handleCurrentChange1(val) {
        this.queryForm1.pageNo = val
        this.getData1()
      },
      handleSizeChange2(val) {
        this.queryForm2.pageSize = val
        this.getData2()
      },
      handleCurrentChange2(val) {
        this.queryForm2.pageNo = val
        this.getData2()
      },
      getData1() {
        const params = {
          Index: this.getPage(this.queryForm1.pageNo, this.queryForm1.pageSize),
          Count: this.queryForm1.pageSize,
        }
        ProductLineList(params).then((res) => {
          console.log(res)
          this.tableData1 = res.LineInfo
          this.total = res.TotalCount
          this.LineId = res.LineInfo[0].LineId
          this.getData2(this.LineId)
        })
      },
      getData22(LineId) {
        this.LineId = LineId
        this.tableData2 = []
        this.getData2()
      },
      getData2() {
        const params = {
          Index: this.getPage(this.queryForm2.pageNo, this.queryForm2.pageSize),
          Count: this.queryForm2.pageSize,
          LineId: this.LineId,
        }
        DeviceListList(params).then((res) => {
          console.log('this.LineIdthis.LineId', this.LineId)
          this.tableData2 = res.DeviceInfo
          this.total2 = res.TotalCount
        })
      },
    },
  }
</script>
